<template>
  <q-card class="system-setting__card q-pa-md">
    <q-toolbar class="full-width q-py-sm q-px-none text-grey-7 relative-position">
      <div class="text-subtitle1">{{ $t('SystemStyleSetup') }}</div>
      <q-space />
      <q-btn v-close-popup class="absolute-top-right q-toolbar--close q-btn-close" dense fab-mini flat icon="close"
             round>
        <q-tooltip v-bind="$tooltipAttr">{{ $t('Close') }}</q-tooltip>
      </q-btn>
    </q-toolbar>
    <q-card-section class="column q-px-none q-gutter-y-md">
      <q-separator class="no-margin" />
      <q-toolbar>
        <q-toggle v-model="sysSetting.isDark" checked-icon="brightness_4" class="custom-switch" dense size="lg"
                  unchecked-icon="brightness_high" @update:model-value="darkToggle" />
        <q-space />
        <span>{{ $t('DarkMode') }}</span>
      </q-toolbar>
      <q-separator />
      <q-toolbar>
        <q-toggle v-model="sysSetting.isDense" class="custom-switch" dense size="lg"
                  @update:model-value="denseToggle" />
        <q-space />
        <span>{{ $t('CompactLayout') }}</span>
      </q-toolbar>
      <template v-for="color in colorList" :key="`picker-${color.key}`">
        <q-separator />
        <q-btn :color="color.key" :text-color="sysSetting.BgToColor(color.key)" glossy no-caps unelevated>
          {{ color.label }}<br>
          {{ color.color }}
          <q-popup-proxy anchor="bottom left" breakpoint="0" self="center right" transition-hide="jump-right"
                         transition-show="jump-left">
            <q-color v-model="color.color" @change="colorTogger($event, color.key)" />
          </q-popup-proxy>
        </q-btn>
      </template>
      <q-btn class="q-mt-lg" glossy icon="restore" unelevated @click="sysSetting.resetSetting">
        {{ $t('Reset') }}
      </q-btn>
    </q-card-section>
  </q-card>
</template>

<script setup>
import { computed } from 'vue'
import { useSysSettingStore } from 'stores/system-setting'

const sysSetting = useSysSettingStore()
const colorList = computed(() => {
  return [{
    label: 'Primary', color: sysSetting.primaryBG, key: 'primary'
  }, {
    label: 'Success', color: sysSetting.positiveBG, key: 'positive'
  }, {
    label: 'Error', color: sysSetting.negativeBG, key: 'negative'
  }, {
    label: 'Prompt', color: sysSetting.infoBG, key: 'info'
  }, {
    label: 'Warning', color: sysSetting.warningBG, key: 'warning'
  }]
})

const darkToggle = e => sysSetting.setDark(e)
const denseToggle = e => sysSetting.setDense(e)
const colorTogger = (color, key) => sysSetting.setColor(color, key)
</script>

<style lang="scss" scoped>
//.q-card :deep(.q-toolbar) {
//  min-height: 0;
//}
//
//.q-toolbar--close {
//  position: absolute;
//  top: 5px;
//  right: 5px;
//}
</style>